<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../static/personal_center/font_2369197_oqktwkt71s/iconfont.css" media="screen">
    <link rel="stylesheet" href="../../static/public_file/css/PersonnelChooser.css">
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            letter-spacing: 1px;
        }
        #loading {
            background: #fff url(../../static/public_file/images/jiazai.gif) no-repeat scroll center center;
            height: 100%; width: 100%; background-size: 10%; position: fixed; margin-top: 0px; top: 0px; left: 0px; bottom: 0px;
            overflow: hidden !important; right: 0px; z-index: 999999;background-color: rgba(255, 255, 255, 0.08);
        }
    </style>
</head>
<body>
    <div id="loading">
        <div id="loading-center">
        </div>
    </div>
    <div style="width: 100%;padding-bottom: 10%;">
        <div style="width: 80%;line-height: 40px;margin-left: 10%;margin-top: 1%;">
            <span style="color: red;">*</span>
            <label for="" style="letter-spacing: 2px;">发&nbsp;起&nbsp;人：</label>
            <input type="text" style="width: 70%;height: 30px;border-radius: 3px;border: #999999 solid 1px;" id="apply_user" onclick="model_line_with_parameters('apply_user')" onfocus="add_color(this)" onblur="remove_color(this)">
        </div>

        <div style="width: 80%;line-height: 40px;margin-left: 10%;margin-top: 1%;">
            <span style="color: red;">*</span>
            <label for="">投票标题：</label>
            <input type="text" style="width: 70%;height: 30px;border-radius: 3px;border: #999999 solid 1px;" id="vote_title" onfocus="add_color(this)" onblur="remove_color(this)">
        </div>

        <div style="width: 80%;margin-left: 10%;margin-top: 1%;">
            <span style="color: red;visibility: hidden;">*</span>
            <label for="" style="vertical-align: top;">详细内容：</label>
            <textarea name="" id="vote_content" cols="30" rows="10" style="width: 70%;border-radius: 3px;border: #999999 solid 1px;" onfocus="add_color(this)" onblur="remove_color(this)"></textarea>
        </div>

        <div style="width: 80%;line-height: 40px;margin-left: 10%;margin-top: 1%;">
            <div style="width: 100%;">
                <span style="color: red;">*</span>
                <label style="vertical-align: top;">投票选项：<span style="color: #999999;">至少两项</span></label>
            </div>
            <div id="VotingOptions" style="width: 100%;">
                <input type="text" class="vat_text" style="width: 70%;height: 30px;border-radius: 3px;border: #999999 solid 1px;margin-left: 7.8%;" onfocus="add_color(this)" onblur="remove_color(this)">
            </div>
            <div style="width: 100%;margin-top: 10px;">
                <button style="width: 150px;margin-left: 7.8%;border: #1296db solid 1px;height: 35px;line-height: 35px;color: #1296db;text-align: center;cursor: pointer;" onclick="add_vot()">
                    <img src="../../static/back_management/images/添加.png" style="width: 25px;height: 25px;margin-top: 3px;" alt="">
                    <span style="vertical-align: top;">添加选项</span>
                </button>
            </div>
        </div>

        <div style="width: 80%;line-height: 40px;margin-left: 10%;margin-top: 1%;">
            <span style="color: red;">*</span>
            <label for="">投票方式：</label>
            <input type="radio" name="vote_type" value="radio" checked> 单选
            <input type="radio" name="vote_type" value="multiple" style="margin-left: 30px;"> 多选
        </div>

        <div style="width: 80%;line-height: 40px;margin-left: 10%;margin-top: 1%;">
            <span style="color: red;">*</span>
            <label for="">截止时间：</label>
            <input id="end_time" type="text" style="width: 70%;height: 30px;border-radius: 3px;border: #999999 solid 1px;" onfocus="add_color(this)" onblur="remove_color(this)" autocomplete="off">
            <div style="width: 70%;color: red;margin-left: 7.8%;font-size: 12px;">注：截止时间为空则为无限期投票；</div>
        </div>

        <div style="width: 80%;margin-left: 10%;margin-top: 1%;">
            <span style="color: red;visibility: hidden;">*</span>
            <label for="">可投票者：</label>
            <div style="width: 70%;height: 150px;border: #999999 solid 1px;display: inline-block;vertical-align: top;">
                <div id="identify-div" style="width: 95%;height: 100%;border-right: #999999 solid 1px;overflow: auto;display: inline-block;vertical-align: top;"></div>
                <div style="width: 4%;height: 100%;cursor: pointer;display: inline-block;text-align: center;vertical-align: top;line-height: 150px;" onclick="model_line_with_parameters('identify-div')">
                    <img src="../../static/back_management/images/人员管理.png" style="width: 25px;height: 25px;" alt="">
                </div>
            </div>
            <div style="width: 70%;color: red;margin-left: 7.8%;font-size: 12px;">注：为空则所有人员可参与投票；</div>
        </div>

        <div style="width: 80%;line-height: 40px;margin-left: 10%;margin-top: 1%;">
            <span style="color: red;">*</span>
            <label for="">投票结果：</label>
            <input type="radio" name="vat_result" value="one" checked> 投票者可见
            <input type="radio" name="vat_result" value="two" style="margin-left: 30px;"> 发起者可见
        </div>

        <div style="width: 80%;height: 40px;margin-left: 10%;margin-top: 3%;">
            <button onclick="InitiateVoting()" style="width: 100px;height: 30px;margin-top: 5px;border: #00a0e9 solid 1px;background: #00a0e9;color: white;text-align: center;cursor: pointer;margin-left: 7.8%;">
                发起投票
            </button>
        </div>
    </div>


    <div id="staff-select" class="shade">
        <div id="staff-model" style="width: 100%;height: 100%;position: absolute;">
            <div style="width: 900px;height: 500px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                <div id="staff-box" style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom: #dfdfdf solid 1px;">
                    <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 40px;font-size: 14px;">
                        选择人员
                    </div>
                    <span onclick="close_model()" style="float: right;padding-right: 2%;cursor: pointer;line-height: 40px;">
                        <i class="iconfont icon-quchu"></i>
                    </span>
                </div>
                <div style="height: 460px;width: 100%;border-bottom: #dfdfdf solid 1px;">
                    <div style="width: 70px;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;">
                        <div id="dep" class="navigation navigation_color" onclick="change_navigation(this)">部门</div>
                        <div id="limits" class="navigation" onclick="change_navigation(this)">权限</div>
                        <div id="fun" class="navigation" onclick="change_navigation(this)">职能</div>
                    </div>
                    <div style="width: 200px;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;">
                        <div style="width: 100%;height: 50px;line-height: 50px;">
                            <input id="SearchDep" onkeydown="SearchDepartment()" class="search_input" type="text" placeholder="搜索" autocomplete="off">
                        </div>
                        <div id="SecondaryNavigation" style="width: 100%;height: 410px;line-height: 50px;overflow: auto;">
                            {% for company in company_list %}
                                <div {% if company.flag == 'true' %} class="company_class company_color" {% else %} class="company_class" {% endif %} id="{{ company.id }}" title="{{ company.name }}" onclick="choose_dep(this)">&nbsp;&nbsp;&nbsp;{{ company.name }}</div>
                            {% endfor %}
                        </div>
                    </div>
                    <div style="width: 200px;height: 100%;border-right: #cfcfcf solid 1px;display: inline-block;vertical-align: top;">
                        <div style="width: 100%;height: 50px;line-height: 50px;">
                            <input type="checkbox" id="select-all" onclick="SelectAll(this)">
                            <input id="SearchPeo" onkeydown="SearchProple()" class="search_input" type="text" placeholder="搜索" autocomplete="off" style="width: 65%;">
                        </div>
                        <div id="ThreeNavigation" style="width: 100%;height: 410px;line-height: 50px;overflow: auto;">
                            {% for peo in people_list %}
                                <div class="personnel_class" onclick="fa_click(this)" id="{{ peo.id }}-{{ peo.job_number }}" title="{{ peo.real_name }}({{ peo.job_number }})">
                                    <input type="checkbox" class="choose_person" onclick="son_click(this)" id="select-{{ peo.job_number }}" title="{{ peo.real_name }}({{ peo.job_number }})">&nbsp;&nbsp;&nbsp;{{ peo.real_name }}({{ peo.job_number }})
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    <div style="width: 400px;height: 100%;display: inline-block;vertical-align: top;overflow: auto">
                        <div style="width: 100%;height: 40px;text-align: left;font-size: 14px;line-height: 40px;">
                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;已选 <span id="selected-number">0</span> 人
                        </div>
                        <div id="selected-div" style="width: 100%;font-size: 14px;height: 370px;overflow: auto;">

                        </div>
                        <div style="width: 100%;font-size: 14px;height: 40px;text-align: center;">
                            <button id="finish_with" style="width: 100px;height: 30px;line-height: 25px;text-align: center;letter-spacing: 5px;border-radius: 3px;border: #cfcfcf solid 1px;font-size: 14px;cursor: pointer;margin-top: 10px;">完成</button>
                            <button onclick="close_model()" style="margin-left: 15px;width: 100px;height: 30px;line-height: 25px;text-align: center;color: #0abb78;letter-spacing: 5px;border-radius: 3px;font-size: 14px;border: #cfcfcf solid 1px;cursor: pointer;margin-top: 10px;">取消</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="../../static/public_file/other/jquery.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script src="../../static/public_file/js/PersonnelChoosersNew.js" type="text/javascript" charset="gb2312"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
        }
        function add_color(obj) {
            obj.style.outline = '#00a0e9 solid 1px';
        }

        function remove_color(obj) {
            obj.style.outline = '#999999';
        }

        lay('#version').html('-v' + laydate.v);

        //执行一个laydate实例
        laydate.render({
            elem: '#end_time', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        function add_vot() {
            var html_str = `
                <input type="text" class="vat_text" style="width: 70%;height: 30px;border-radius: 3px;border: #999999 solid 1px;margin-left: 7.8%;margin-top: 15px;" onfocus="add_color(this)" onblur="remove_color(this)">
            `
            $("#VotingOptions").append(html_str);
        }

        function scrollConversationScreen() {
            $('#selected-div').scrollTop($('#selected-div')[0].scrollHeight);
        }

        function IdentifyPersonnel(obj_id) {
            close_model();
            var selected_personnel_list = document.getElementsByClassName('selected-personnel');
            if (obj_id === 'identify-div') {
                for (var i=0; i<selected_personnel_list.length; i++) {
                    var job_number = selected_personnel_list[i].innerText.split('(')[1].replace(")", '');
                    if (!document.getElementById("identify-"+job_number)) {
                        var this_name = selected_personnel_list[i].innerText;
                        var html_str = `
                            <div id="identify-`+job_number+`" style="width: 70px;height: 40px;display: inline-block;vertical-align: top;margin-left: 10px;text-align: center;position: relative;background: #E8E8E8;margin-top: 8px;">
                                <div onclick="remove_identify(`+job_number+`)" style="width: 15px;height: 15px;background: #cfcfcf;border-radius: 50%;line-height: 14px;cursor: pointer;right: -5px;top: -5px;position: absolute;">
                                    <i class="iconfont icon-quchu" style="font-size: 12px;color: white;"></i>
                                </div>
                                <p class="identify-personnel" style="height: 15px;margin-top: 0;font-size: 14px;">`+this_name+`</p>
                            </div>
                        `
                        $('#identify-div').append(html_str)
                    }
                }
            }else {
                document.getElementById(obj_id).value = selected_personnel_list[0].innerText;
            }
        }

        function remove_identify(obj_id) {
            document.getElementById('identify-'+obj_id).remove();
        }

        function InitiateVoting() {
            var apply_user = document.getElementById("apply_user").value;       // 发起人
            var vote_title = document.getElementById("vote_title").value;   // 投票标题
            var vote_content = document.getElementById("vote_content").value;   // 投票详情
            var vat_text_list = document.getElementsByClassName("vat_text");    // 投票选项
            var VatTextList = [];
            for (var i=0; i<vat_text_list.length; i++) {
                if (vat_text_list[i].value.trim()) {
                    VatTextList.push(vat_text_list[i].value.trim());
                }
            }
            var vote_type = $("input[type=radio][name=vote_type]:checked").val();
            var vote_deadline = document.getElementById("end_time").value;    // 投票截至时间
            var identify_personnel_list = document.getElementsByClassName("identify-personnel");        // 可投票人
            var VotingOption = [];
            for (var j=0; j<identify_personnel_list.length; j++) {
                VotingOption.push(identify_personnel_list[j].innerText);
            }
            var vote_viewable = $("input[type=radio][name=vat_result]:checked").val();

            if (!apply_user) {
                alert("请选择发起人！")
                return false
            }else if (!vote_title) {
                alert("请输入投票标题！")
                return false
            }else if (VatTextList.length === 0) {
                alert("请输入投票选项！")
                return false
            }else if (!vote_deadline) {
                alert("请选择投票截至时间！")
                return false
            }
            var form = new FormData();
            form.append('apply_user', apply_user);
            form.append('vote_title', vote_title);
            form.append('vote_content', vote_content);
            form.append('VatTextList', JSON.stringify(VatTextList));
            form.append('vote_type', vote_type);
            form.append('vote_deadline', vote_deadline);
            form.append('VotingOption', JSON.stringify(VotingOption));
            form.append('vote_viewable', vote_viewable);
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;          // 获取当前IP
            xhr.open('post', "/back-management/InitiateVoting.html", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var JsonDate = JSON.parse(xhr.responseText);
                        if (JsonDate["code"] === 200) {
                            alert("创建成功");
                            window.location = "VoteList.html";
                        } else {
                            alert(JsonDate['message']);
                            document.getElementById("loading").style.display = "none";
                        }
                    }
                }
            };
        }
    </script>
</body>
</html>